<template>
  <div class="hybgBox">
    <div class="history-image" id="newImg">
      <p>新图片</p>
      <div
        class="image-area"
        :style="{ width: size.devwidth + 'px', height: size.devheight + 'px' }"
      >
        <vueCropper
          ref="cropper"
          @realTime="realTime"
          :img="options.img"
          :outputSize="options.size"
          :outputType="options.outputType"
          :info="options.info"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :fixedBox="options.fixedBox"
          :canMoveBox="false"
          :autoCropHeight="options.autoCropHeight"
          :fixed="options.fixed"
          :full="options.full"
          crossorigin="anonymous"
        ></vueCropper>
      </div>
    </div>

    <div class="history-image" v-if="showHistoryImageChild">
      <p>原图片</p>
      <img
        :src="ImageEditorUrl"
        alt="加载失败"
        :style="{
          width: size.width + 'px',
          height: size.height + 'px',
          borderRadius: size.radius
        }"
      />
    </div>
    <div class="button">
      <label
        class="upload-label"
        for="uploads"
        @mouseover="hoverin('tixin')"
        @mouseout="hoverout"
        :class="{ hover: hoverName === 'tixin' }"
        >选择</label
      >
      <input
        type="file"
        v-if="qkinput"
        id="uploads"
        style="position:absolute; clip:rect(0 0 0 0);"
        accept="image/png, image/jpeg, image/jpg"
        @change="uploadImg($event, 1)"
      />
      <el-button type="success" @click="uploadImageConfirmButton('blob')"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import vueCropper from "vue-cropper";
export default {
  props: {
    ImageEditorUrl: String,
    size: Object,
    imgName: String,
    showHistoryImage: Boolean,
    formsys: String
  },
  data() {
    return {
      crap: false,
      hybjDatato: {},
      hoverName: false,
      previews: {},
      showHistoryImageChild: true,
      qkinput: true,
      options: {
        img: "",
        info: true,
        size: 1,
        outputType: "jpeg",
        full: true,
        // canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 9,
        autoCropHeight: 9,
        // 开启宽度和高度比例
        // fixed: true,
        // fixedNumber: [4, 3],
        fixedBox: true
      },
      isUploaded: false,
      bgEditorUrl:
        "https://publicstatic-1255598151.cos.ap-shanghai.myqcloud.com/publish/xcx.png"
    };
  },

  mounted() {
    this.options.autoCropWidth = this.size.width;
    this.options.autoCropHeight = this.size.height;
    if (this.showHistoryImage === false) {
      this.showHistoryImageChild = false;
      document.getElementById("newImg").style.width = "100%";
    }
  },
  methods: {
    realTime(data) {
      this.previews = data;
    },
    //上传鼠标移入
    hoverin(index) {
      this.hoverName = index;
    },
    hoverout() {
      this.hoverName = false;
    },

    uploadImageConfirmButton() {
      if (!this.isUploaded) {
        this.$message({
          message: "请选择本地图片",
          center: true,
          type: "warning"
        });
        return;
      }
      return this.$refs.cropper.getCropBlob(data => {
        let formData = new FormData();
        let name = this.imgName + ".jpeg";
        let sys = "multipartFile";
        if (!!this.formsys) sys = this.formsys;
        formData.append(sys, data, name);
        this.qkinput = false;
        this.$nextTick(() => {
          this.qkinput = true;
          this.options.img = null;
        });
        this.$emit("bindFormdata", formData, this.previews);
        this.$emit("uploadImage", data, this.previews);
      });
    },
    uploadImg(e, num) {
      //上传图片
      let file = e.target.files[0];
      if (!file) return false;
      if (file.size / 1024 / 1024 > 20) {
        this.$message({
          message: "图片大小不能超过20MB",
          center: true,
          type: "warning"
        });
        return false;
      }
      if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
        this.$message({
          message: "图片类型必须是,jpeg,jpg,png中的一种",
          center: true,
          type: "warning"
        });
        return false;
      }
      let reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        this.options.img = data;
      };
      // 转化为blob
      this.isUploaded = true;
      reader.readAsArrayBuffer(file);
    }
  },
  components: {
    vueCropper
  }
};
</script>
<style scoped lang="less">
.hybgBox {
  width: 100%;
  overflow: hidden;
  height: 100%;
  .image-area {
    width: 380px;
    height: 220px;
    border: 1px solid #999;
  }
  .show-preview {
    border: 1px solid #e4e4e4;
    background: url("../assets/diwen.png") repeat 0 0;
  }
  .button {
    overflow: hidden;
    width: 100%;
    text-align: right;
    padding: 20px 0;
    .upload-label {
      width: 56px;
      height: 28px;
      font-size: 12px;
      border-radius: 3px;
      color: white;
      margin-right: 8px;
      display: inline-block;
      background-color: #67c23a;
      text-align: center;
      line-height: 28px;
    }
    .hover {
      background: #85ce61;
      border-color: #85ce61;
    }
  }
  .history-image {
    float: left;
    width: 50%;
    margin-top: 40px;
    padding: 35px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      position: absolute;
      top: -30px;
      line-height: 30px;
      size: 20px;
      width: 100%;
      text-align: center;
    }
    img {
      width: 375px;
      height: 211px;
      display: block;
      border: 1px solid #eee;
    }
  }
}
</style>
